<template>
  <div class="page">
    <data-box ref="databox" :params="params" @resetForm="resetPhone" :server="servers.getCaseInfoPageList" row-key="cupoBatch" autoSearch showExpend>
      <!--输入区域-->
      <template slot="mustShowInput">
        <el-form-item label="客户姓名" v-role="0x040409" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum" :rules="[validate.truePhoneRules()]" v-role="0x040419">
          <el-input v-model="params.phoneNumX" @change="PhoneFormat" :maxlength="13"></el-input>
        </el-form-item>
      </template>
      <template slot="input">
        <el-form-item label="申请省份" v-role="0x040407" prop="province">
          <el-select v-model="params.province" placeholder="请选择" clearable>
            <el-option v-for="{id,areaName} in provinceList" :key="id" :label="areaName" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请城市" v-role="0x040408" prop="city">
          <el-select v-model="params.city" placeholder="请选择" clearable>
            <el-option v-for="{id,areaName} in cityList" :key="id" :label="areaName" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" v-role="0x040405" prop="batchNumber">
          <el-input v-model="params.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="还款状态" v-role="0x040410" prop="cupoPaystatus">
          <el-select v-model="params.cupoPaystatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0033')" :key="id" :label="name" :value="name">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="逾期天数" v-role="0x040411" prop="overDueDays1" :rules="[
            { validator: validate.validateMin(params.overDueDays2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueDays1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040411" prop="overDueDays2" :rules="[
            { validator: validate.validateMax(params.overDueDays1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueDays2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="催收员" v-role="0x040412" prop="cupoName">
          <el-input v-model="params.cupoName"></el-input>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="案件金额" v-role="0x040413" prop="overDueAmount1" :rules="[
            { validator: validate.validateMin(params.overDueAmount2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueAmount1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040413" prop="overDueAmount2" :rules="[
            { validator: validate.validateMax(params.overDueAmount1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueAmount2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="案件手数" v-role="0x040414" prop="caseHandnum1" :rules="[
            { validator: validate.validateMin(params.caseHandnum2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.caseHandnum1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040414" prop="caseHandnum2" :rules="[
            { validator: validate.validateMax(params.caseHandnum1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.caseHandnum2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="佣金比例%" v-role="0x040415" prop="commissionRat1" :rules="[
            { validator: validate.validateMin(params.commissionRat2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.commissionRat1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040415" prop="commissionRat2" :rules="[
            { validator: validate.validateMax(params.commissionRat1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.commissionRat2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="委案日期" v-role="0x040416" prop="caseDate1">
            <el-date-picker v-model="params.caseDate1" type="date" placeholder="选择日期" :picker-options="caseDate1" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="-" v-role="0x040416" prop="caseDate2">
            <el-date-picker v-model="params.caseDate2" type="date" placeholder="选择日期" :picker-options="caseDate2" :editable="false">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="结案日期" v-role="0x040417" prop="endDate1">
            <el-date-picker v-model="params.endDate1" type="date" placeholder="选择日期" :picker-options="endDate1" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="-" v-role="0x040417" prop="endDate2">
            <el-date-picker v-model="params.endDate2" type="date" placeholder="选择日期" :picker-options="endDate2" :editable="false">
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="状态" v-role="0x040418" prop="cupoStatus">
          <el-select v-model="params.cupoStatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0018')" :key="id" :label="name" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委托方" v-role="0x040406" prop="prinCode">
          <el-select v-model="params.prinCode" placeholder="请选择" clearable>
            <el-option v-for="{index,prinId,prinName} in dataName" :key="index" :label="prinName" :value="prinId">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template slot="button">
        <!--按钮区域-->
        <el-button @click="reAllocatClick" v-role="0x040401">重新分配</el-button>
        <el-button @click="exportButionClick" v-role="0x040402">导出跟进记录</el-button>
      </template>
      <template slot="column">
        <!--数据列区域-->
        <el-table-column type="selection" width="30">
        </el-table-column>
        <el-table-column type="index" label="序号" width="30">
        </el-table-column>
        <el-table-column prop="cupoCasenum" label="案件编号" min-width="90">
          <template scope="scope">
            <el-button type="text" size="small" @click="casedetailsClick(scope)">{{scope.row.cupoCasenum}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="cupoBatch" label="批次号" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoPrincipal" label="委托方" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoCity" label="申请城市" min-width="60">
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名" min-width="55">
        </el-table-column>
        <el-table-column prop="cupoPhone" label="手机号" min-width="80">
          <template scope="scope">
            <span>{{scope.row.cupoPhone | encryptPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoPaystatus" label="还款状态" min-width="55">
        </el-table-column>
        <el-table-column prop="cupoOverday" label="逾期天数" min-width="55">
        </el-table-column>
        <el-table-column prop="cupoAmt" label="案件金额(元)" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoHandnum" label="案件手数" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoCharg" label="佣金比例(%)" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoPrindate" label="委案日期" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoEndday" label="结案日期" min-width="80">
        </el-table-column>
        <el-table-column prop="cupoDeptname" label="机构名称" min-width="60">
        </el-table-column>
        <el-table-column prop="cupoName" label="催收员" min-width="50">
          <template scope="scope">
            <span>{{scope.row.cupoName || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoStatus" label="状态" min-width="55">
          <template scope="scope">
            <el-popover trigger="hover" placement="bottom" v-if="scope.row.cupoStatus===57">
              <p class="text-left">还款金额: {{ getRepayNum(scope) }}元</p>
              <p class="text-left">还款日期: {{ getRepayDate(scope) }}</p>
              <div slot="reference" class="name-wrapper">
                <el-button type="text" style="color:green">{{scope.row.cupoStatus | typeCodeConvert('0018')}}</el-button>
              </div>
            </el-popover>
            <span v-else>{{scope.row.cupoStatus | typeCodeConvert('0018')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template scope="scope">
            <el-button type="text" size="small" @click="followRecord(scope)" v-role="0x040403" v-if="scope.row.cupoStatus!==62">跟进记录</el-button>
            <el-button type="text" size="small" @click="caseTransferClick(scope)" v-role="0x040404" v-if="scope.row.cupoStatus!==62">案件流转记录</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--弹出框-->
    <el-dialog title="选择催收机构或催收员" v-model="accUserDialogsVisual" class="dialog-middle" @close="chooseClose" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <allot-include-tree @close="accUserDialogsVisual=false" @org="orgflag=true" @user="userflag=true" ref="allotTree"></allot-include-tree>
    </el-dialog>
    <!--案件详情-->
    <el-dialog title="案件详情" v-model="caseDetailsFlag" size="full" @open="detailsOpen" :modal="false">
      <details-tab :tabsArr="tabsArr" ref="tab">
        <template slot="custInform">
          <cust-inform ref="custInform"></cust-inform>
        </template>
        <template slot="payInform">
          <pay-inform ref="payInform"></pay-inform>
        </template>
        <template slot="attachInform">
          <attach-inform ref="attachInform"></attach-inform>
        </template>
      </details-tab>
    </el-dialog>
    <!--org-->
    <el-dialog title="案件分配" v-model="orgflag" @open="orgOpen" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <organization-reallocate ref="organizationReallocate" @close="orgflag=false" @orgPreStep="accUserDialogsVisual = true" @refresh="$refs['databox'].refresh()"></organization-reallocate>
    </el-dialog>
    <!--user-->
    <el-dialog title="案件分配" v-model="userflag" @open="userOpen" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <user-reallocate ref="userReallocate" @close="userflag=false" @userPreStep="accUserDialogsVisual = true" @refresh="$refs['databox'].refresh()"></user-reallocate>
    </el-dialog>
    <!--弹出框：跟进记录START-->
    <el-dialog title="跟进记录" @open="custFollowOpen" v-model="followUpRecordClickHandle" size="large" :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <cost-follow ref="costFollow"></cost-follow>
    </el-dialog>
    <!--弹出框：跟进记录END-->
    <!--弹出框：案件流转记录-->
    <el-dialog title="案件流转记录" v-model="caseTransfer.flag" size="small" @close="caseTransfer.data = []">
      <el-col class="text-center" style="padding:20px 20px 30px 20px">
        <el-steps :space="150" :active="caseTransfer.data.length-1" process-status="success" v-if="caseTransfer.data.length > 0">
          <el-step v-for="item in caseTransfer.data" :title="titleAndName(item)" :key="item.index" :description="item.createTime" style="float: left;margin-bottom: 10px;width:150px"></el-step>
        </el-steps>
        <el-col v-else class="text-center">暂无数据</el-col>
      </el-col>
    </el-dialog>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import server from '@/config/servers'
  import AllotIncludeTree from '@/views/case-manage/AllotIncludeTree'
  import net from '@/util/net'
  import CostFollow from '@/views/approval-manage/CostFollow'
  import { getCityJson, validateMin, validateMax, downloadFile, truePhoneRules, mobileFormatting } from '@/util/common'
  // 案件详情
  import DetailsTab from '@/components/DetailsTab'
  import CustInform from '@/views/case-manage/CustInform'
  import PayInform from '@/views/case-manage/PayInform'
  import AttachInform from '@/views/case-manage/AttachInform'
  // 催收员分配
  import UserReallocate from '@/views/case-manage/UserReallocate'
  // 机构分配
  import OrganizationReallocate from '@/views/case-manage/OrganizationReallocate'

  export default {
    name: 'case-reallocate',
    data() {
      return {
        // 服务接口列表
        servers: {
          getCaseInfoPageList: server.CaseManage.get_case_info_page_list, // 获取案件列表
          getAccReceivePoolByUserId: server.CaseManage.get_acc_receive_pool_by_userId, // 获取催收员分配信息
          getAccCaseinfoTranlog: server.CustomerManage.get_acc_case_info_tranlog, // 获取案件流转记录
          exportFollowup: server.CaseManage.export_acc_followup // 导出跟进记录
        },
        // 定义请求参数
        params: {
          batchNumber: '',
          caseDate1: '',
          caseDate2: '',
          caseHandnum1: '',
          caseHandnum2: '',
          city: '',
          commissionRat1: '',
          commissionRat2: '',
          cupoName: '',
          cupoPaystatus: '',
          endDate1: '',
          endDate2: '',
          custName: '',
          overDueAmount1: '',
          overDueAmount2: '',
          overDueDays1: '',
          overDueDays2: '',
          prinCode: '',
          province: '',
          cupoStatus: '',
          phoneNum: '',
          phoneNumX: '',
          sort: 'cupoCasenum,asc'
        },
        validate: {
          validateMin,
          validateMax,
          truePhoneRules
        },
        provinceList: getCityJson({ level: 1 }), // 省份列表
        multipleSelection: [],
        accUserDialogsVisual: false,
        // 机构
        orgflag: false,
        orgData: [],
        // 用户
        userflag: false,
        cupor: [],
        allocated: 0,
        // 案件详情
        tabsArr: [{
          title: '客户信息',
          pane: 'custInform'
        }, {
          title: '还款信息',
          pane: 'payInform'
        }, {
          title: '附件信息',
          pane: 'attachInform'
        }],
        caseDetail: {
          cust: {
            type: '',
            prinCode: '',
            idCardNumber: ''
          },
          pay: {
            type: '',
            cupoOrdernum: '',
            productId: '',
            orderNum: ''
          },
          attach: {
            type: '',
            cupoCasenum: '',
            custId: ''
          }
        },
        caseDetailsFlag: false,
        /**
         * 获取委案日期
         */
        caseDate1: {
          disabledDate: (time) => {
            let endTime = this.params.caseDate2
            if (endTime) {
              return time.getTime() > endTime.getTime()
            }
          }
        },
        caseDate2: {
          disabledDate: (time) => {
            let startTime = this.params.caseDate1
            if (startTime) {
              return time.getTime() < startTime.getTime()
            }
          }
        },
        /**
         * 获取结案日期
         */
        endDate1: {
          disabledDate: (time) => {
            let endTime = this.params.endDate2
            if (endTime) {
              return time.getTime() > endTime.getTime()
            }
          }
        },
        endDate2: {
          disabledDate: (time) => {
            let startTime = this.params.endDate1
            if (startTime) {
              return time.getTime() < startTime.getTime()
            }
          }
        },
        // 跟进记录
        followUpRecordClickHandle: false,
        dataName: [],
        // 案件流转记录
        caseTransfer: {
          flag: false,
          data: []
        },
        repayArr: []
      }
    },
    computed: {
      /**
       * 获取2级城市列表
       */
      cityList() {
        return this.params.province ? getCityJson({ level: 1, parentId: this.params.province }) : []
      }
    },
    deactivated() {
      this.caseDetailsFlag = false
    },
    mounted() {
      net.send({
        server: server.ApprovalManage.get_all_pricipal,
        data: this.$route.path
      }).then((data) => {
        // 接口返回的数据
        this.dataName = data
      })
      this.getRepayData()
    },
    methods: {
      /**
       * 手机号重置
       */
      resetPhone() {
        this.params.phoneNumX = ''
      },
      /**
       * 手机号格式设置(xxx-xxxx-xxxx)
       */
      PhoneFormat() {
        // 输入框输入手机格式(xxx-xxxx-xxxx)
        this.params.phoneNumX = mobileFormatting(this.params.phoneNumX.replace(/-/g, ''))
        // 取消'-'格式
        this.params.phoneNum = this.params.phoneNumX.replace(/-/g, '')
      },
      /**
       * 获取承诺还款的数据
       */
      getRepayData() {
        net.send({
          server: server.CaseManage.get_acc_recevice_pool_by_token
        }).then((data) => {
          this.repayArr = data
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 获取承诺还款的金额
       */
      getRepayNum(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return item.promiseAmt
        }
      },
      /**
       * 获取承诺还款的日期
       */
      getRepayDate(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return item.promiseDate
        }
      },
      /**
       * 流转记录title
       */
      titleAndName(item) {
        return `${item.userDep}(${item.catrUser})`
      },
      /**
       * 选择Close
       */
      chooseClose() {
        this.$refs['allotTree'].refresh()
      },
      /**
       * 机构分配Open
       */
      orgOpen() {
        this.$nextTick(() => {
          this.$refs['organizationReallocate'].refresh(this.multipleSelection)
        })
      },
      /**
       * 用户分配Open
       */
      userOpen() {
        this.$nextTick(() => {
          this.$refs['userReallocate'].refresh(this.multipleSelection)
        })
      },
      /**
       * 重新分配
       */
      reAllocatClick() {
        this.multipleSelection = this.$refs['databox'].getCurrentSelection()
        if (this.multipleSelection.length === 0) {
          this.$alert('请选择要分配的案件', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.accUserDialogsVisual = true
        }
      },
      /**
       * 导出跟进记录
       */
      exportButionClick() {
        net.send({
          server: this.servers.exportFollowup,
          data: this.params
        }).then((data) => {
          // 接口返回的数据
          if (data) {
            downloadFile(data, '跟进记录')
          } else {
            this.$message({
              type: 'info',
              message: '暂无数据'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 案件详情
       */
      casedetailsClick(scope) {
        console.log(scope)
        this.caseDetail.attach.custId = scope.row.custId
        this.caseDetail.attach.orderNum = scope.row.cupoOrdernum
        this.caseDetail.cust.custId = scope.row.custId
        this.caseDetail.cust.idCardNumber = scope.row.cupoIdcard
        this.caseDetail.pay.productId = scope.row.cupoProid
        this.caseDetail.pay.cupoOrdernum = scope.row.cupoOrdernum
        this.caseDetail.pay.orderNum = scope.row.cupoOrdernum

        this.caseDetailsFlag = true
      },
      /**
       * 案件详情open事件
       */
      detailsOpen() {
        this.$nextTick(() => {
          this.$refs['payInform'].refresh(this.caseDetail.pay)
          this.$refs['attachInform'].refresh(this.caseDetail.attach)
          this.$refs['custInform'].refresh(this.caseDetail.cust)
        })
      },
      /**
       * 跟进记录
       */
      followRecord(scope) {
        this.$store.commit('updateFollowRecordCupoId', scope.row.cupoCasenum)
        this.followUpRecordClickHandle = true
      },
      custFollowOpen() {
        this.$nextTick(() => {
          this.$refs['costFollow'].refresh()
        })
      },
      /**
       * 案件流转记录
       */
      caseTransferClick(scope) {
        net.send({
          server: this.servers.getAccCaseinfoTranlog,
          data: {
            cupoCasenum: scope.row.cupoCasenum
          }
        }).then((data) => {
          // 接口返回的数据
          this.caseTransfer.data = data
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
        this.caseTransfer.flag = true
      }
    },
    components: {
      DataBox,
      AllotIncludeTree,
      CostFollow,
      // 案件详情
      DetailsTab,
      CustInform,
      PayInform,
      AttachInform,
      // 用户分配
      UserReallocate,
      // 机构分配
      OrganizationReallocate
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
